<template>
  <el-dialog
    v-el-drag-dialog
    title="模板信息"
    :visible.sync="visible"
    width="80%">
    <div class="mod-user">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.keywords" placeholder="阿里云短信服务模板详情信息" :disabled="true" clearable style="width: 120%;"></el-input>
        </el-form-item>
      </el-form>
      <el-table
        :data="templateList"
        border
        v-loading="dataListLoading"
        @selection-change=""
        style="width: 100%;">
        <el-table-column
          prop="createDate"
          header-align="center"
          align="center"
          width="160"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="templateContent"
          header-align="center"
          align="center"
          label="模板内容">
        </el-table-column>
        <el-table-column
          prop="templateName"
          header-align="center"
          align="center"
          label="模板名称">
        </el-table-column>
        <el-table-column
          prop="templateCode"
          header-align="center"
          align="center"
          label="模板Code">
        </el-table-column>
        <el-table-column
          prop="templateType"
          header-align="center"
          align="center"
          label="模板类型">
          <template slot-scope="scope">
          <span>
             {{scope.row.templateType == 0 ? '验证码'
               :scope.row.templateType == 1 ? '短信通知'
               :scope.row.templateType == 2 ? '推广短信'
               :scope.row.templateType == 3 ? '国际/港澳台消息':'' }}
           </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          header-align="center"
          align="center"
          label="审批备注">
        </el-table-column>
        <el-table-column
          prop="templateStatus"
          header-align="center"
          align="center"
          label="审批状态">
          <template slot-scope="scope">
          <span>
             {{scope.row.templateStatus == 0 ? '审核中'
               :scope.row.templateStatus == 1 ? '审核通过'
               :scope.row.templateStatus == 2 ? '审核失败':''}}
           </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
  import AddOrUpdate from '../finance/finance-add-or-update'
  export default {
    data () {
      return {
        visible: false,
        templateList: [],
        dataForm: {
          keywords: '',
          createDate: '',
          templateContent: '',
          templateName: '',
          templateCode: '',
          templateType: '',
          templateStatus: ''
        },
        dataListLoading: false
      }
    },
    components: {
      AddOrUpdate
    },
    methods: {
      // 获取阿里库数据列表
      getTemplateList () {
        debugger
        this.visible = true
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/message/queryTemplateList'),
          method: 'post'
        }).then(({data}) => {
          debugger
          this.templateList = data.data
          console.log(this.templateList)
          this.dataListLoading = false
        })
      }
    }
  }
</script>
